<template>
  <div class="app">
    <div class="juzhong">
      <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
      <!-- 上 -->
      <ul class="first">
        <div class="upfillet aa">
          <span class="left">选择线路</span>
          <span class="right">></span>
        </div>
        <div class="downfillet aa">
          <span class="left">急速模式</span>
          <van-switch v-model="checked1" class="right" @click="checkeda" />
        </div>
      </ul>
      <div class="tips">
        <span>开启后，部分动效将被关闭，建议设备性能较差的用户开启</span>
      </div>
      <!-- 中 -->
      <ul class="center">
        <div class="upfillet aa">
          <span class="left">AI智能测距</span>
          <van-switch v-model="checked2" class="right" @click="checkedb" />
        </div>
        <div class="aa">
          <span class="left">护眼模式</span>
          <van-switch v-model="checked3" class="right" @click="checkedc" />
        </div>
        <div class="downfillet aa">
          <span class="left">使用时长提醒</span>
          <van-switch v-model="checked4" class="right" @click="checkedd" />
        </div>
      </ul>
      <div class="tips">
        <span>开启后，每持续使用60分钟，会提示休息一下</span>
      </div>
      <!-- 下 -->
      <ul class="bottom">
        <div class="aa">
          <span class="left">关于我们</span>
          <span class="right">v3.19.1》</span>
        </div>
      </ul>
      <van-button round size="normal" type="primary" @click="getout"
        >退出登入</van-button
      >
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { Button, Switch, NavBar } from "vant";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  components: {
    vanSwitch: Switch,
    vanNavBar: NavBar,
    vanButton: Button,
  },
  setup() {
    // 按钮键
    const checked1 = ref(false);
    const checkeda = () => {
      Toast("开启急速模式");
    };
    const checked2 = ref(false);
    const checkedb = () => {
      Toast("开启AI智能测距");
    };
    const checked3 = ref(false);
    const checkedc = () => {
      Toast("开启护眼模式");
    };
    const checked4 = ref(false);
    const checkedd = () => {
      Toast("时长提醒已启动");
    };

    //返回
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };

    // 退出登录
    const getout = () => {
      router.push("/home/index");
      localStorage.setItem("username", "");
      localStorage.setItem("password", "");
      localStorage.setItem("sex", "");
    };
    return {
      checked1,
      checked2,
      checked3,
      checked4,
      checkeda,
      checkedb,
      checkedc,
      checkedd,
      onClickLeft,
      getout,
    };
  },
};
</script>

<style lang="less" scoped>
.app {
  background: #f5f5f5;
  height: 667px;
  text-align: center;
  .juzhong {
    width: 375px;
    margin: auto;
  }
  .aa {
    width: 315px;
    height: 52px;
    line-height: 52px;
    background: white;
    padding: 5px 15px;
    span {
      font-size: 14px;
    }
  }
  .tips {
    width: 100%;
    text-align: center;
    span {
      font-size: 12px;
      color: rgb(202, 199, 199);
    }
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .upfillet {
    border-radius: 20px 20px 0 0;
  }
  .downfillet {
    border-radius: 0 0 20px 20px;
  }
  .first {
    margin: 10px 15px 5px;
  }
  .center {
    margin: 5px 15px;
  }
  .bottom {
    margin: 5px 15px;
    div {
      border-radius: 20px;
    }
  }
  button {
    width: 300px;
    height: 45px;
    margin-top: 10px;
  }
}
</style>
